﻿<UserControl
    x:Class="CodeShow.CS.AnimationStoryboardDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CodeShow.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <!--BeginCutPaste-->
    <Grid>
        <Rectangle x:Name="MyAnimatedRectangle" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" >
            <Rectangle.Fill>
                <SolidColorBrush x:Name="MyAnimatedBrush"  />
            </Rectangle.Fill>
        </Rectangle> 
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Running">
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetName="MyAnimatedBrush" 
                            Storyboard.TargetProperty="Color"
                            BeginTime="0"
                            Duration="0:0:5"
                            From="Green"
                            To="Red"
                            RepeatBehavior="Forever"
                            AutoReverse="True"/>
                        <DoubleAnimation
                            EnableDependentAnimation="True"
                            Storyboard.TargetName="MyAnimatedRectangle"
                            Storyboard.TargetProperty="Height"
                            BeginTime="0"
                            Duration="0:0:10"
                            From="500"
                            To="200"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                        <DoubleAnimation
                            EnableDependentAnimation="True"
                            Storyboard.TargetName="MyAnimatedRectangle"
                            Storyboard.TargetProperty="Width"
                            BeginTime="0"
                            Duration="0:0:5"
                            From="200"
                            To="500"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <!--EndCutPaste-->
</UserControl>
